"use client"

import Image from "next/image"
import RetroChat from "@/components/retro-chat"
import OnlineUsers from "@/components/online-users"
import TokenPriceChart from "@/components/token-price-chart"
import { useUser } from "@/hooks/useUser"
import { useState, useEffect } from "react"
 
export default function Home() {
  const { user, loading } = useUser()
  const [showTokenChart, setShowTokenChart] = useState(true)
  const [dbStatus, setDbStatus] = useState<"checking" | "ready" | "demo" | "error">("checking")
  const [dbError, setDbError] = useState<string | null>(null)

  // Check database tables on client side
  useEffect(() => {
    const checkDb = async () => {
      try {

        // If tables don't exist, try to initialize them via API
        const response = await fetch("/api/init-db")
        const data = await response.json()

        if (data.success) {
          if (data.status === "demo") {
            setDbStatus("demo")
          } else {
            setDbStatus("ready")
          }
        } else {
          setDbStatus("error")
          setDbError(data.message || "Failed to initialize database")
        }
      } catch (error: any) {
        console.error("Error checking database:", error)
        setDbStatus("demo")
        setDbError(error.message || "Unknown database error")
      }
    }

    checkDb()
  }, [])

  return (
    <div className="min-h-screen flex flex-col items-center py-4">

      <div className="w-full max-w-6xl bg-[#c0c0c0] border-[6px] border-[#c0c0c0] shadow-lg win95-border">
        {/* Title bar */}
        <header className="flex items-center justify-between px-1 py-1 bg-[#000080] text-white">
          <div className="flex items-center">
            <div className="mr-1">
              <Image src="/images/pumproom-logo.png" width={16} height={16} alt="Pumproom Logo" className="w-4 h-4" />
            </div>
            <h1 className="text-sm font-bold">PUMPROOM - CHATROOM</h1>
          </div>
          <div className="flex">
            <button className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0] mr-1">
              _
            </button>
            <button className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0] mr-1">
              □
            </button>
            <button className="win95-button w-5 h-5 flex items-center justify-center text-black bg-[#c0c0c0]">X</button>
          </div>
        </header>

        {/* Menu bar */}
        <div className="bg-[#c0c0c0] text-black text-sm border-b border-[#808080] flex">
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">File</button>
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">Edit</button>
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">View</button>
          <button className="px-3 py-1 hover:bg-[#000080] hover:text-white">Help</button>
        </div>

        <div className="flex flex-col md:flex-row">
          {/* Left sidebar */}
          <div className="w-full md:w-64 bg-[#c0c0c0] border-r border-[#808080] p-2">
            <h2 className="text-center text-black mb-2 font-bold">Room List</h2>
            <div className="space-y-2">
              <button className="w-full win95-button bg-[#c0c0c0] text-black py-1 px-2 text-left">
                <span className="underline">M</span>ain Chat
              </button>
              <button className="w-full win95-button bg-[#c0c0c0] text-black py-1 px-2 text-left">
                <span className="underline">N</span>ews Channel
              </button>
              <button className="w-full win95-button bg-[#c0c0c0] text-black py-1 px-2 text-left">
                <span className="underline">C</span>reate New Room
              </button>
            </div>

            <div className="mt-4 border-t border-[#808080] pt-2">
              <h3 className="text-sm font-bold mb-2">Online Users</h3>
              <OnlineUsers />
            </div>
          </div>

          {/* Main chat area */}
          <RetroChat />

          {/* Right sidebar */}
          <div className="w-full md:w-72 bg-[#c0c0c0] border-l border-[#808080] p-2">
            <div className="flex items-center mb-2">
              <Image
                src="/images/pumproom-logo.png"
                width={16}
                height={16}
                alt="Pumproom Logo"
                className="w-4 h-4 mr-1"
              />
              <h2 className="text-black text-sm font-bold">PumpRoom Token</h2>
            </div>
            <div className="bg-white win95-inset p-1 mb-2 text-xs font-mono break-all">
              576NRVg37rKEcJqoxXRDvodbxcmnuNozNcyvXY5upump
            </div>

            {/* Twitter Link Section */}
            <div className="win95-inset bg-white p-1 mb-2">
              <div className="bg-[#000080] text-white px-1 flex items-center justify-between mb-1">
                <span className="text-xs">Follow Us</span>
                <button className="win95-button w-4 h-4 flex items-center justify-center text-black bg-[#c0c0c0] text-xs">
                  X
                </button>
              </div>
              <a
                href="https://x.com/solpumproom"
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center py-1 px-1 hover:bg-[#000080] hover:text-white text-xs"
              >
                <div className="win95-button bg-[#c0c0c0] p-1 mr-2 flex items-center justify-center">
                  <span className="font-bold">𝕏</span>
                </div>
                @solpumproom
              </a>
            </div>

            <div className="flex space-x-2 mb-2">
              <a href="#" className="block win95-button p-1 bg-[#c0c0c0]">
                <Image src="/placeholder.svg?height=16&width=16" width={16} height={16} alt="X" className="w-4 h-4" />
              </a>
              <a href="#" className="block win95-button p-1 bg-[#c0c0c0]">
                <Image
                  src="/placeholder.svg?height=16&width=16"
                  width={16}
                  height={16}
                  alt="Social"
                  className="w-4 h-4"
                />
              </a>
              <a href="#" className="block win95-button p-1 bg-[#c0c0c0]">
                <Image
                  src="/placeholder.svg?height=16&width=16"
                  width={16}
                  height={16}
                  alt="Social"
                  className="w-4 h-4"
                />
              </a>
            </div>
            <div className="win95-inset bg-white p-1 text-sm mb-2">
              <div className="bg-[#000080] text-white px-1 flex items-center justify-between mb-1">
                <span className="text-xs">System Announcement</span>
                <button className="win95-button w-4 h-4 flex items-center justify-center text-black bg-[#c0c0c0] text-xs">
                  X
                </button>
              </div>
              <p className="text-xs mb-1">
                1. Server optimization in progress
                <br />
                2. New partnerships coming soon
                <br />
                3. Thanks for your support!
                <br />
                4. More features in development...
              </p>
            </div>
            <div className="win95-inset bg-white p-1 text-sm">
              <div className="bg-[#000080] text-white px-1 flex items-center justify-between mb-1">
                <span className="text-xs">Update Log</span>
                <button className="win95-button w-4 h-4 flex items-center justify-center text-black bg-[#c0c0c0] text-xs">
                  X
                </button>
              </div>
              <p className="text-xs">
                1. Real-time chat and view meme prices
                <br />
                2. Real-time emoji generation
                <br />
                3. Wallet connection functionality
                <br />
                4. More features coming soon!
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Token Price Chart Section with toggle button */}
      <div className="mt-4 w-full max-w-6xl">
        <div className="bg-[#c0c0c0] win95-border p-1">
          <div className="flex justify-between items-center">
            <div className="flex flex-1">
              <div className="w-12 bg-[#008080]"></div>
              <div className="bg-[#000080] text-white px-2 py-1 flex-1">
                <span className="font-bold">Token Price Charts</span>
              </div>
            </div>
            <button
              onClick={() => setShowTokenChart(!showTokenChart)}
              className="win95-button bg-[#c0c0c0] px-2 py-0 text-xs mr-1"
            >
              {showTokenChart ? "Hide" : "Show"}
            </button>
          </div>
          {showTokenChart && <TokenPriceChart />}
        </div>
      </div>
    </div>
  )
}
